<template>
  <view :class="$style.container">
    <view :class="$style.title">{{titleName}}</view>

    <view style="height: 90%">

      <qiun-data-charts type="mix" 
        :chartData="userARPU" canvasId="two_b" 
        :opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0}]}}" />
    </view>
  </view>
</template>

<script setup lang='ts'>
import { ref } from "vue";

const titleName = ref<string>("燃气事故公司本年度处置事故数统计");

const userARPU = ref<object>({
  categories: ["1月", "2月", "3月", "4月", "5月","6月","7月","8月", "9月", "10月", "11月", "12月"],
  series: [
    {
      name: "统计数量",
      data: [
        {
          value: 10,
          color: "#00CC99",
        },
        {
          value: 15,
          color: "#00CC99",
        },
        {
          value: 7,
          color: "#00CC99",
        },
        {
          value: 12,
          color: "#00CC99",
        },
        {
          value: 10,
          color: "#00CC99",
        },
         {
          value: 5,
          color: "#00CC99",
        },
         {
          value: 11,
          color: "#00CC99",
        },
         {
          value: 8,
          color: "#00CC99",
        },
         {
          value: 10,
          color: "#00CC99",
        },
         {
          value: 15,
          color: "#00CC99",
        },
         {
          value: 9,
          color: "#00CC99",
        },
         {
          value: 12,
          color: "#00CC99",
        },
      ],
      type: "column",
      color: "#24ABFD",
       barWidth:5,
      unit: "",
    },
    {
      name: "统计数量",
      data: [10, 15, 7, 12, 10,5,11,8,10,15,9,12],
      type: "line",
      addPoint: true,
      color: "#DF297D",
      unit: "",
    },
  ],
  yAxis: [
    {
      max: 20,
      min: 0,
    },
    {
      max: 20,
      min: 0,
    },
  ],
});
</script>

<style lang='less' module>
.container {
  margin: 20rpx 20rpx 20rpx;
  height: 330rpx;
  background: #ffffff;
  box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);
  border-radius: 20px;
  padding: 10rpx 20rpx;

  .title {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
}
</style>
